<template>
	<view class="content">
		<view class="logo">
			<image class="logo-dom" src="../../static/LOGO.png" mode=""></image>
		</view>
		<view class="title">智慧工地管理系统</view>
		<view class="login-box">
			<view class="title-box">使用您的账户和密码登录这里</view>
			<view class="from-data-box">
				<view class="input-box"><input v-model="form.username" class="input-dom" placeholder-class="cl" placeholder="请输入账户" /></view>
				<view class="input-box"><input v-model="form.password" class="input-dom" placeholder-class="cl" placeholder="请输入密码"
					 type="password" /></view>
				<button type="primary" size="medium" class="btn-login" @tap="Login()">
					<u-loading mode="flower" :show="showLoading"></u-loading>
					{{showLoading? "":"登录"}}
				</button>
				<!-- <view class="forget">忘记密码?</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		login
	} from '../../api/user.js';
	import {
		gpsToGcj02
	} from '@/common/index.js'
	let that = null;
	export default {
		data() {
			return {
				form: {
					username: '',
					password: ''
				},
				// 当前剩余秒数
				curCount: null,
				// 获取验证码按钮样式切换
				disabled: false,
				// 验证码按钮文字
				btnContent: '发送验证码',
				// 倒计时定时器
				timer: null,
				showLoading: false
			};
		},
		onLoad() {
			that = this;
		},
		created() {
			this.form.username = uni.getStorageSync('username') || ""
			this.form.password = uni.getStorageSync('password') || ""
		},
		mounted() {
			// gpsToGcj02()
			// that.sendMessageInit();
		},
		methods: {
			 async Login() {
				if (that.form.username == '') {
					uni.showToast({
						title: '请输入用户名',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				if (that.form.password == '') {
					uni.showToast({
						title: '请输入密码',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				this.showLoading = true
				login(that.form).then(res => {
						this.showLoading = false
						console.log(res);
						console.log(this.showLoading)
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
						if (res.code == 1) {
							// 登录成功
							uni.setStorageSync('username', this.form.username)
							uni.setStorageSync('password', this.form.password)
							// 存储Token
							uni.setStorageSync('token', res.result.token);
							// 存储用户信息
							uni.setStorageSync('user', res.result.user);
							if (res.result.user.roleId == 1) {
								// 超级管理员
								uni.switchTab({
									url: '../root/home/index'
								});
							}
							if (res.result.user.roleId == 2) {
								// 项目管理员
								uni.redirectTo({
									url: '../project/index?id=' + res.result.user.id
								});
							}
							if (res.result.user.roleId == 3) {
								// 车队负责人
								uni.redirectTo({
									url: '../motorcade/index'
								});
							}
						} else {
							this.showLoading = false
						}
						// console.log(res);
					})
					.catch(function(res) {
						this.showLoading = false
						// 异常情况处理
						console.log(res);
					});
			},
			// 验证码初始化
			sendMessageInit: function() {
				// 获取当前剩余秒数
				that.curCount = that.getCount();
				// 启动定时器
				that.timer = setInterval(that.SetRemainTime, 1000); //启动计时器，1秒执行一次
			},
			//获取剩余时间
			getCount: function() {
				// 获取本地保存的倒计时结束时间
				var OverTime = uni.getStorageSync('OverTime');
				// 获取现在时间
				var NowTime = new Date().getTime();
				// 判断倒计时结束日期是否存在，倒计时结束日期是否小于现在时间
				if (OverTime == null || OverTime < NowTime) {
					// 没有发送或者已经超过60秒
					return 0;
				} else {
					// 倒计时未结束
					OverTime = uni.getStorageSync('OverTime');
					var remainTime = (OverTime - NowTime) / 1000;
					// 返回时间差，并取整
					return parseInt(remainTime);
				}
			},
			// 倒计时执行函数
			SetRemainTime: function() {
				// 如果剩余倒计时小于0，则重置,结束定时器。
				if (that.curCount <= 0) {
					//停止计时器
					clearInterval(that.timer);
					// 重置
					that.btnContent = '获取验证码';
					that.disabled = false;
				} else {
					// 倒计时减少
					that.curCount--;
					that.btnContent = '请' + that.curCount + '秒' + '再试';
					that.disabled = true;
				}
			},
			// 发送验证码
			sendMessageFn: function() {
				// 判断是否处于倒计执行中
				if (that.disabled == false) {
					// 判断手机号是否正确
					// 请求短信验证码接口
					// 将未来时间写入本地
					uni.setStorageSync('OverTime', new Date().getTime() + 60000);
					// 获取倒计时
					that.curCount = that.getCount();
					// 启动定时器
					that.timer = setInterval(that.SetRemainTime, 1000); //启动计时器，1秒执行一次
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.cl {
		color: #6f89e0;
	}

	.content {
		height: 100%;
		width: 100%;
		background-image: url(../../static/bg.png) !important;
		background-size: 100%;
		position: relative;

		.logo {
			padding-top: 170rpx;
			text-align: center;

			.logo-dom {
				height: 180rpx;
				width: 166rpx;
			}
		}

		.title {
			text-align: center;
			font-size: 36rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 80rpx;
			letter-spacing: 1rpx;
			color: #ffffff;
		}
	}

	.login-box {
		width: 650rpx;
		box-shadow: 0 0 100rpx 5rpx #e1e6fa;
		border-radius: 10rpx;
		padding: 40rpx 40rpx;
		background-color: #ffffff;
		margin: auto;
		margin-top: 40px;
	}

	.title-box {
		color: #5997fe;
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
	}

	.from-data-box {
		margin-top: 40rpx;

		.input-box {
			height: 100rpx;
			background-color: #f3f6ff;
			border-radius: 10rpx;
			margin-bottom: 60rpx;

			.input-dom {
				height: 100rpx;
				padding-left: 30rpx;
				font-size: 30rpx;
				font-weight: 400;
			}
		}

		.btn-login {
			height: 96rpx;
			// background-color: #5c92ff!important;
			border-radius: 10rpx;
			font-size: 36rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 60rpx;
			letter-spacing: 1rpx;
			color: #ffffff;
			text-align: center;
			line-height: 96rpx;
		}

		.code-input {
			width: 60%;
			display: inline-block;
		}

		.code-btn {
			width: 40%;
			display: inline-block;
			height: 100%;
			vertical-align: top;
			padding-right: 10rpx;
		}

		.code-btn-box {
			border-radius: 10rpx;
			font-size: 28rpx;
			font-weight: normal;
			font-stretch: normal;
			color: #ffffff;
			text-align: center;
			margin-top: 18rpx;
		}

		.disabled {
			background-color: #999999 !important;
		}

		.forget {
			font-size: 30rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 60rpx;
			letter-spacing: 0px;
			color: #6f88e6;
			text-align: center;
			margin-top: 40rpx;
		}
	}
</style>
